<!DOCTYPE html>
<html> 
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>yukari world</title>
    <#include "/lib/base_source.ftl">
      <style type="text/css">
      </style>
  </head> 
  <body>
    <div class='whole-container'>
      <#include "/lib/header.ftl">
        <div>
          <ul class="breadcrumb">
            <li>抽奖管理</li><span class="divider">/</span>
            <li>鱼吧抽奖器</li>
          </ul>
        </div>
        <div class="container-fluid">
          <div class="row-fluid">
            <div class="container span12">
              <#include "/lib/alert.ftl">
                 <div class='main-content'>
                    <div class="well form-horizontal">
                        <div class='main-action'>
                        	<form id="findForm">
                        		<div class="control-group">
	                                <label class="control-label">鱼吧链接：</label>
	                                <div class="controls">
	                                    <input type="text" id="url" name="url" value="" />
	                                </div>
	                            </div>
                        		<div class="control-group">
	                                <label class="control-label">抽奖人数：</label>
	                                <div class="controls">
	                                    <input type="text" id="size" name="size" value="" />
	                                </div>
	                            </div>
                        		<div class="control-group">
	                                <label class="control-label">查询方式：</label>
	                                <div class="controls">
	                                    <input type="radio" name="status" value="1" checked/>按回复(重复回复有效)&nbsp;&nbsp;<input type="radio" name="status" value="2"/>按人数(重复回复无效)
	                                </div>
	                            </div>
                        	</form>
                        		<div class="control-group">
	                                <label class="control-label"></label>
	                                <div class="controls">
	                                    <button id="lotteryBtn" onclick="lottery()" class="btn btn-info btn-sm">抽奖</button>
	                                    <button onclick="showAndHide()" class="btn btn-info btn-sm">显示/隐藏图片</button>
	                                </div>
	                            </div>
                        </div>
                    </div>
                    
                    <div class="table-content">
                    <#-- table -->
                        <table class="table-striped table-condensed table-hover" id="itemTable" style="width: 100%;max-width: 100%;margin-bottom: 20px;font-size:12px;word-break:break-all;word-wrap:break-word;">
                        </table>
                        <div class="pagination" id="itemPage"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
  <script>
    $(document).ready(function() {
	});
	
	function lottery(){
		$("#lotteryBtn").prop("disabled",true);
		$("#itemTable").html("");
		var url = $("#url").val();
		var size = $("#size").val();
		var status = $("input[name=status]:checked").val();
		$.ajax({
			url : "${rc.contextPath}/admin/random/yuba",
	    	dataType : "json",
	    	data :  {"url":url,"size":size,"status":status},
	    	type:'post',
	    	success:function(json){
	    		if (json.code == 0){
	    			var data = json.data;
	    			for(var i=0;i<data.length;i++){
	    				showResult(json.data[i]);
	    			}
	    			var imgs = $("#itemTable").find("img");
					for (var i=0;i<imgs.length;i++){
						var img = $(imgs[i]);
						var src = img.attr("_src")
						if (src != null){
							img.attr("src",src);
						}
					}
	    		} else {
	    			alert("抽奖失败: "+json.message);
	    		}
				$("#lotteryBtn").prop("disabled",false);
	    	}
		});
	}
	
	
	function showResult(data){
		var tr = $('<tr></tr>')
		var td1 = $('<td style="width:50px;text-align:right;">'+data.number+'</td>');
		var td2 = $('<td style="width:130px;text-align:right;">'+data.date+'</td>');
		var td3 = $('<td style="width:200px;">'+data.name+'</td>');
		var td4 = $('<td>'+data.txt+'</td>');
		tr.append(td1).append(td2).append(td3).append(td4);
		$("#itemTable").append(tr);
	}
	function showAndHide(){
		var imgs = $("#itemTable").find("img");
		for (var i=0;i<imgs.length;i++){
			var img = $(imgs[i]);
			var src = img.attr("_src")
			if (src != null){
				img.toggle();
			}
		}
	}
	
		
   </script>
</body>
</html>